import {guid2} from './uuid' // 引用js方法用{}
import proj4 from 'proj4'
import mapboxgl from 'mapbox-gl'

function FillLayer (options) {
  this.map = options.map// 必填
  this.breaks = options.breaks
  this.colors = options.colors

  this.imgCanvas = document.createElement('canvas')
  // 随机生成一个id，当前填色图中source，layer都以这个id为后缀
  let id = guid2()

  this.greyDatas = []

  // 图像source
  this.imageSourceID = 'imageSource' + id
  this.valueSourceID = 'valueSource' + id
  this.contourSourceID = 'contourSource' + id

  this.imageLayerID = 'imageLayer' + id
  this.valueLayerID = 'valueLayer' + id
  this.contourLayerID = 'contourLayer' + id
  this.contourLabelLayerID = 'contourLabelLayer' + id

  // 图层显隐状态
  this.valueLayerShow = false
  this.contourLayerShow = false

  // 初始化source对象
  let canvasSource = {
    type: 'canvas',
    canvas: this.imgCanvas,
    animate: true,
    'coordinates': [
      [60.8904094274634, 37.0989729068452],
      [77.8592466483073, 37.0989729068452],
      [77.8592466483073, 23.7010950372178],
      [60.8904094274634, 23.7010950372178]
    ]
  }
  this.map.addSource(this.imageSourceID, canvasSource)
  this.map.addSource(this.valueSourceID, {
    'type': 'geojson',
    'data': {
      'type': 'FeatureCollection',
      'features': []
    }
  })

  // 初始化layer对象
  this.map.addLayer({
    'id': this.imageLayerID,
    'source': this.imageSourceID,
    'type': 'raster',
    'paint': {
      'raster-opacity': 0.8
    }
  }, 'admin-1-boundary-bg')
  this.map.addLayer({
    'id': this.valueLayerID,
    'type': 'symbol',
    'source': this.valueSourceID,
    'layout': {
      'text-field': ['get', 'value'],
      'text-font': ['Open Sans Regular'],
      'text-offset': [0, 0]
    },
    paint: {
      'text-color': 'hsl(0, 0%, 78%)',
      'text-halo-color': 'hsla(0, 0%, 13%, 0.75)',
      'text-halo-width': 1,
      'text-halo-blur': 1
    }
  })
  this.contourColors = ['step', ['get', 'level']]
  for (let i = 0; i < this.breaks.length; i++) {
    this.contourColors.push(this.colors[i])
    this.contourColors.push(this.breaks[i])
  }
  this.contourColors.push(['rgb', 255, 255, 255])

  // 默认设置隐藏
  this.map.setLayoutProperty(this.valueLayerID, 'visibility', 'none')

  var _self = this
  this.clickevt = function (e) {
    let value = _self.getRealValueByLngLat([e.lngLat.lng, e.lngLat.lat])
    if (value) {
      new mapboxgl.Popup()
        .setLngLat(e.lngLat)
        .setHTML(value)
        .addTo(_self.map)
    }
  }
}

FillLayer.prototype.getRealValueByLngLat = function (lonlat) {
  if (!this.imageInfo) { return null }
  let coors = proj4('EPSG:4326', 'EPSG:3857', [lonlat[0], lonlat[1]])
  // 墨卡托转图像像素
  let x = Math.ceil((coors[0] - (-20026376.39)) / (20026376.39 * 2) * this.imageInfo.width)
  let y = Math.ceil((20048966.10 - coors[1]) / (20048966.10 * 2) * this.imageInfo.height)
  let value = this.greyDatas[y * this.imageInfo.width + x]
  value = value * (this.imageInfo.max_value - this.imageInfo.min_value) / 255 + this.imageInfo.min_value

  if (value) { value = value.toFixed(1) }
  return value
}

export {FillLayer}
